<template>
    <div class="app-container">
        <header>
            <div>
                <el-form :model="form" inline size="small">
                    <el-form-item label="关注开始">
                        <el-date-picker v-model="form.name" type="date" placeholder="选择日期" />
                    </el-form-item>
                    <el-form-item label="关注结束" label-width="150px">
                        <el-date-picker v-model="form.name" type="date" placeholder="选择日期" />
                    </el-form-item>
                    <el-form-item label="昵称" label-width="150px">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="真实姓名" label-width="150px">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" label-width="150px">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="教练" label-width="70px">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="是否关注" label-width="150px">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否高管" label-width="150px">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注" label-width="150px">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left: 100px;">
                        <el-button type="primary" size="small" icon="el-icon-search">查询</el-button>
                    </el-form-item>

                </el-form>
            </div>
        </header>

        <main>
            <div style="height: 650px;">
                <el-table :data="tableData" height="100%" border stripe
                    :default-sort="{ prop: 'date', order: 'descending' }">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column prop="name" sortable label="ID" align="center" />
                    <el-table-column prop="car" label="所属驾校" align="center" />
                    <el-table-column prop="car" label="头像" align="center" />
                    <el-table-column prop="car" label="上级教练ID" align="center" />
                    <el-table-column prop="car" label="昵称" align="center" />
                    <el-table-column prop="car" label="姓名" align="center" />
                    <el-table-column prop="car" label="电话" align="center" />
                    <el-table-column prop="pid" label="身份证" align="center">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.id" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="car" label="关注" align="center" />
                    <el-table-column prop="car" label="关注日期" align="center" />
                    <el-table-column prop="car" label="教练" align="center" />
                    <el-table-column prop="car" label="高管" align="center" />
                    <el-table-column prop="car" label="备注" align="center" />
                    <el-table-column label="操作">
                        <template>
                            <el-button type="text" size="small">编辑</el-button>
                            <el-button type="danger" size="small" class="el-icon-delete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </main>


        <!-- 分页 -->
        <footer>
            <div class="pagin">
                <el-pagination background :current-page="Params.page" :page-sizes="[20, 50, 100, 150]"
                    :page-size="Params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change='handleSizeChange' @current-change='handleCurrentChange' />
            </div>
        </footer>
    </div>
</template>

<script>
/**
* @author        Yng
* @time          2023-12-06 10:19:46  星期三
* @description   粉丝信息
**/


export default {
    name: 'userInfo',
    data() {
        return {
            form: {
                name: '',
                region: ''
            },
            tableData: [],
            Params: {
                page: 1,
                pageSize: 20
            },
            total: 0
        }
    },
    mounted() {
        const Arr = Array(7)
        const arr = Array.of(7)
        console.log('Arr :>> ', Arr);
        console.log('arr :>> ', arr);
    },
    methods: {
        // 一页几条数据
        handleSizeChange(val) {
            this.Params.pageSize = val
        },
        // 当前页
        handleCurrentChange(val) {
            this.Params.page = val
        },
    }
}
</script>

<style lang="scss" scoped></style>